<template>
  <div class="dialogue">
    <header id="wx-header">
      <div class="other">
        <router-link :to="{path:'/wechat/dialogue/dialogue-info',query:{msgInfo:msgInfo}}" tag="span" class="iconfont icon-chat-group"
                     v-show="$route.query.group_num&&$route.query.group_num!=1"></router-link>
        <router-link :to="{path:'/wechat/dialogue/dialogue-detail',query:{msgInfo:msgInfo}}" tag="span" class="iconfont icon-chat-friends"
                     v-show="$route.query.group_num==1"></router-link>
      </div>
      <div class="center">
        <router-link to="/" tag="div" class="iconfont icon-return-arrow">
          <span>微信</span>
        </router-link>
        <span>{{pageName}}</span>
        <span class="parentheses"
              v-show="$route.query.group_num&&$route.query.group_num!=1">{{$route.query.group_num}}</span>
      </div>
    </header>
    <section class="dialogue-section clearfix" v-on:click = "MenuOutsideClick">
      <div class="row clearfix" v-for="item in msgInfo.msg">
        <img :src="item.headerUrl" class="header">
        <p class="text" v-more>{{item.text}}</p>
      </div>
      <span class="msg-more" id="msg-more">
        <ul>
            <li>复制</li>
            <li>转发</li>
            <li>收藏</li>
            <li>删除</li>
        </ul>
      </span>
    </section>
    <footer class="dialogue-footer">
      <div class="component-dialogue-bar-person">
        <span class="iconfont icon-dialogue-jianpan" v-show="!currentChatWay" v-on:click="currentChatWay=true"></span>
        <span class="iconfont icon-dialogue-voice" v-show = "currentChatWay" @click="currentChatWay=false"></span>
        <div class="chat-way" v-show="!currentChatWay">
          <div class="chat-say" v-press>
            <span class="one">按住 说话</span>
            <span class="two">松开 结束</span>
          </div>
        </div>
        <div class="chat-way" v-show="currentChatWay">
          <input class="chat-txt" type="text" @focus="focusIpt" @blur="blurIpt"/>
        </div>
        <span class="expression iconfont icon-dialogue-smile"></span>
        <span class="more iconfont icon-dialogue-jia"></span>
        <div class="recording" id="recording" style="display: none">
          <div class="recording-voice" id="recording-voice" style="display: none">
            <div class="voice-inner">
              <div class="voice-icon"></div>
              <div class="voice-volume">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
              </div>
            </div>
            <p>手指上划,取消发送</p>
          </div>
          <div class="recording-cancel" style="display: none">
            <div class="cancel-inner"></div>
            <p>松开手指,取消发送</p>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>
<script>
  export default{
    data(){
      return {
        pageName: this.$route.query.name,
        currentChatWay: true, //ture为键盘打字 false为语音输入
        timer: null
      }
    },
    beforeRouteEnter(to,from,next){
      next(vm => {
        vm.$store.commit('setPageName',vm.$route.query.name)
      })
    },
    computed: {
      msgInfo(){
        for (var i in this.$store.state.msgList.baseMsg) {
          if (this.$store.state.msgList.baseMsg[i].mid == this.$route.query.mid) {
            return this.$store.state.msgList.baseMsg[i]
          }
        }
      }
    },
    methods: {
      // 解决输入法被激活时 底部输入框被遮住问题
      focusIpt(){
        this.timer = setInterval(function () {
          document.body.scrollTop = document.body.scrollHeight
        })
      },
      blurIpt(){
        clearInterval(this.timer)
      },
      // 点击空白区域，菜单被隐藏

      MenuOutsideClick(e){
        //querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
        var container = document.querySelector('.text');
        var msgMore = document.getElementById('msg-more');
        if (e.target.className === 'text') {

        } else {
          msgMore.style.display = 'none'
        }
      }
    },
    directives:{
      press:{
        bind(element,binding){
          var startTx = null;
          var startTy = null;
          element.addEventListener('touchstart',function(event){
            var recording = document.querySelector('.recording');
            var recordingVoice = document.querySelector('.recording-voice')
            element.className = "chat-say say-active";
            recording.style.display = recordingVoice.style.display = 'block'
            var touches = event.touches[0];
            startTx = touches.clientX;
            startTy = touches.clientY;
            event.preventDefault()
          },false);
          element.addEventListener('touchend',function(event){
            var recording = document.querySelector('.recording');
            var recordingVoice = document.querySelector('.recording-voice');
            var recordingCancel = document.querySelector('.recording-cancel');
            element.className = 'chat-say';
            recordingCancel.style.display = recording.style.display = recordingVoice.style.display = "none";
            event.preventDefault()
          },false);
          element.addEventListener('touchmove',function(event){
            var recording = document.querySelector('.recording'),
              recordingVoice = document.querySelector('.recording-voice'),
              recordingCancel = document.querySelector('.recording-cancel');
            var touches = event.touches[0];
            var endTx = touches.clientX,
                endTy = touches.clientY,
                distanceX = startTx - endTx,
                distanceY = startTy - endTy;
            if(distanceY>10 && distanceY<80){
              // 控制范围 和谐掉指尖抖动
              element.className = "chat-say"
              recordingVoice.style.display = "none"
              recordingCancel.style.display = "block"
            }else if(distanceY>80){
              element.className = "chat-say";
              recording.style.display = recordingCancel.style.display = "none"
            };
            // 阻断事件冒泡 防止页面被一同向上滑动
            event.preventDefault()
          },false)
        }
      },
      more:{
        bind(element,binding){
          var startTx, startTy;
          element.addEventListener('touchstart',function(event){
            var msgMore = document.getElementById('msg-more'),
              touches = event.changedTouches[0],
              startTx = touches.clientX,
              startTy = touches.clientY;
            // 控制菜单的位置
            msgMore.style.left = ((startTx-18)>180?180:(startTx-18))+ 'px';
            msgMore.style.top = (element.offsetTop -33 ) +'px';
            msgMore.style.display = "block";
            event.preventDefault();
          },false)
        }
      }
    }
  }
</script>
<style>
  @import "../../assets/css/dialogue.css";

  .say-active {
    background: #c6c7ca;
  }
</style>
